<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-archive"></i>
              Docker镜像仓库管理
            </h1>
            <p class="page-subtitle">管理Docker镜像仓库配置和认证</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_registries || 0 }}</div>
              <div class="stat-label">仓库总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.connected_registries || 0 }}</div>
              <div class="stat-label">已连接</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_repositories || 0 }}</div>
              <div class="stat-label">仓库数量</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="search-filters glass-effect">
        <el-form inline class="search-form">
          <el-form-item>
            <el-button type="primary" @click="refreshRegistries" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新仓库
            </el-button>
            <el-button @click="addRegistry" class="glass-button add-button">
              <i class="fa fa-plus"></i>
              添加仓库
            </el-button>
            <el-button @click="testAllConnections" class="glass-button import-button" :loading="testing">
              <i class="fa fa-plug"></i>
              测试所有连接
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 镜像仓库列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-archive"></i>
          Docker镜像仓库列表
        </div>

        <el-table
          :data="registries"
          style="width: 100%"
          v-loading="loading"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="name" label="仓库名称" min-width="150">
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-archive"></i>
                {{ scope.row.name }}
                <el-tag v-if="scope.row.is_default" type="success" size="small" style="margin-left: 8px;">默认</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="url" label="仓库地址" min-width="200" />

          <el-table-column prop="username" label="用户名" width="120" />

          <el-table-column prop="registry_type" label="类型" width="100">
            <template #default="scope">
              <el-tag :type="getRegistryTypeColor(scope.row.registry_type)" size="small">
                {{ getRegistryTypeText(scope.row.registry_type) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="connection_status" label="连接状态" width="120">
            <template #default="scope">
              <el-tag
                :type="getStatusType(scope.row.connection_status)"
                size="small"
              >
                {{ getStatusText(scope.row.connection_status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="repositories_count" label="仓库数量" width="100">
            <template #default="scope">
              <el-tag type="info" size="small">
                {{ scope.row.repositories_count || 0 }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="420" :show-overflow-tooltip="false">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  @click="testConnection(scope.row)"
                  size="small"
                  class="glass-button test-button"
                  :loading="scope.row.testing"
                >
                  <i class="fa fa-plug"></i>
                  测试连接
                </el-button>
                <el-button
                  @click="syncRegistry(scope.row)"
                  size="small"
                  class="glass-button sync-button"
                  :loading="scope.row.syncing"
                >
                  <i class="fa fa-sync"></i>
                  同步
                </el-button>
                <el-button
                  v-if="scope.row.registry_type === 'harbor'"
                  @click="manageProjects(scope.row)"
                  size="small"
                  class="glass-button manage-button"
                >
                  <i class="fa fa-folder"></i>
                  项目管理
                </el-button>
                <el-button
                  @click="editRegistry(scope.row)"
                  size="small"
                  class="glass-button edit-button"
                >
                  <i class="fa fa-edit"></i>
                  编辑
                </el-button>
                <el-button
                  @click="deleteRegistry(scope.row)"
                  size="small"
                  class="glass-button delete-button"
                >
                  <i class="fa fa-trash"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 镜像仓库配置对话框 -->
    <el-dialog
      v-model="registryDialogVisible"
      :title="registryDialogTitle"
      width="600px"
      class="glass-dialog"
    >
      <el-form :model="registryForm" :rules="registryRules" ref="registryFormRef" label-width="120px">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="registryForm.name" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="仓库地址" prop="url">
          <el-input v-model="registryForm.url" placeholder="https://registry.example.com" />
        </el-form-item>
        <el-form-item label="仓库类型" prop="registry_type">
          <el-select v-model="registryForm.registry_type" placeholder="选择仓库类型" class="glass-select">
            <el-option label="Docker Hub" value="dockerhub" />
            <el-option label="Harbor" value="harbor" />
            <el-option label="私有仓库" value="private" />
            <el-option label="阿里云" value="aliyun" />
            <el-option label="腾讯云" value="tencent" />
          </el-select>
        </el-form-item>

        <!-- Harbor认证方式选择 -->
        <el-form-item v-if="registryForm.registry_type === 'harbor'" label="认证方式" prop="auth_type">
          <el-radio-group v-model="registryForm.auth_type" class="auth-type-group">
            <el-radio label="password" class="glass-radio">
              <i class="fa fa-user"></i>
              用户名密码
            </el-radio>
            <el-radio label="token" class="glass-radio">
              <i class="fa fa-robot"></i>
              Robot Token
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 用户名密码认证 -->
        <template v-if="registryForm.registry_type !== 'harbor' || registryForm.auth_type === 'password'">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registryForm.username" placeholder="请输入用户名" class="glass-input" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registryForm.password" type="password" placeholder="请输入密码" show-password class="glass-input" />
          </el-form-item>
        </template>

        <!-- Robot Token认证 -->
        <el-form-item v-if="registryForm.registry_type === 'harbor' && registryForm.auth_type === 'token'" label="Robot Token" prop="robot_token">
          <el-input
            v-model="registryForm.robot_token"
            type="textarea"
            :rows="3"
            placeholder="请输入Robot Token，例如：m6lwdrEqXkNKATBieQfJa1RKOQnGiXI1"
            class="glass-input"
          />
          <div class="form-tip">
            <i class="fa fa-info-circle"></i>
            Robot Token可在Harbor管理界面的"机器人账户"中创建
          </div>
          <div class="form-warning">
            <i class="fa fa-exclamation-triangle"></i>
            <strong>重要提示：</strong>Robot Token默认只能访问公开项目。如需访问私有项目，请确保：
            <br>1. 创建<strong>系统级别</strong>的Robot Token（不是项目级别）
            <br>2. 或为Robot Token分配具体私有项目的访问权限
            <br>3. 确保Robot Token具有足够的读取权限
          </div>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="registryForm.description" type="textarea" placeholder="仓库描述" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="registryForm.is_active">启用仓库</el-checkbox>
          <el-checkbox v-model="registryForm.is_default">设为默认仓库</el-checkbox>
          <el-checkbox v-model="registryForm.auto_sync">自动同步</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="registryDialogVisible = false" class="glass-button">取消</el-button>
          <el-button type="primary" @click="saveRegistry" class="glass-button add-button" :loading="saving">
            <i class="fa fa-save"></i>
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { dockerRegistryAPI } from '@/api/docker'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()

// 响应式数据
const loading = ref(false)
const testing = ref(false)
const saving = ref(false)

// 统计数据
const statistics = reactive({
  total_registries: 0,
  connected_registries: 0,
  total_repositories: 0
})

// 数据列表
const registries = ref([])

// 镜像仓库对话框
const registryDialogVisible = ref(false)
const registryDialogTitle = ref('')
const registryFormRef = ref<FormInstance>()
const registryForm = reactive({
  id: null,
  name: '',
  url: '',
  registry_type: 'private',
  auth_type: 'password',
  username: '',
  password: '',
  robot_token: '',
  description: '',
  is_active: true,
  is_default: false,
  auto_sync: false
})

const registryRules: FormRules = {
  name: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' }
  ],
  url: [
    { required: true, message: '请输入仓库地址', trigger: 'blur' },
    { type: 'url', message: '请输入正确的URL格式', trigger: 'blur' }
  ],
  registry_type: [
    { required: true, message: '请选择仓库类型', trigger: 'change' }
  ],
  auth_type: [
    { required: true, message: '请选择认证方式', trigger: 'change' }
  ],
  username: [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (registryForm.registry_type !== 'harbor' || registryForm.auth_type === 'password') {
          if (!value) {
            callback(new Error('请输入用户名'))
          }
        }
        callback()
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (registryForm.registry_type !== 'harbor' || registryForm.auth_type === 'password') {
          if (!value) {
            callback(new Error('请输入密码'))
          }
        }
        callback()
      },
      trigger: 'blur'
    }
  ],
  robot_token: [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (registryForm.registry_type === 'harbor' && registryForm.auth_type === 'token') {
          if (!value) {
            callback(new Error('请输入Robot Token'))
          }
        }
        callback()
      },
      trigger: 'blur'
    }
  ]
}

// 页面加载
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    await Promise.all([
      loadRegistries(),
      loadStatistics()
    ])
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 加载镜像仓库列表
const loadRegistries = async () => {
  try {
    console.log('🔄 开始加载镜像仓库列表...')
    const response = await dockerRegistryAPI.getRegistries()
    console.log('📦 API响应:', response)
    registries.value = response.data.results || response.data || []
    console.log('✅ 镜像仓库列表加载完成:', registries.value)
  } catch (error) {
    console.error('❌ 加载镜像仓库失败:', error)
    ElMessage.error('加载镜像仓库失败')
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const registriesData = registries.value
    const totalRegistries = registriesData.length
    const connectedRegistries = registriesData.filter((r: any) => r.connection_status === 'connected').length
    const totalRepositories = registriesData.reduce((sum: number, r: any) => sum + (r.repositories_count || 0), 0)

    Object.assign(statistics, {
      total_registries: totalRegistries,
      connected_registries: connectedRegistries,
      total_repositories: totalRepositories
    })
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 刷新镜像仓库列表
const refreshRegistries = () => {
  loadData()
  ElMessage.success('镜像仓库列表已刷新')
}

// 添加镜像仓库
const addRegistry = () => {
  resetRegistryForm()
  registryDialogTitle.value = '添加镜像仓库'
  registryDialogVisible.value = true
}

// 重置表单
const resetRegistryForm = () => {
  Object.assign(registryForm, {
    id: null,
    name: '',
    url: '',
    registry_type: 'private',
    auth_type: 'password',
    username: '',
    password: '',
    robot_token: '',
    description: '',
    is_active: true,
    is_default: false,
    auto_sync: false
  })
  registryFormRef.value?.clearValidate()
}

// 测试连接
const testConnection = async (registry: any) => {
  registry.testing = true
  try {
    const response = await dockerRegistryAPI.testRegistryConnection(registry.id)
    if (response.data.success) {
      ElMessage.success(`${registry.name} 连接测试成功`)
      await loadRegistries()
    } else {
      ElMessage.error(`${registry.name} 连接测试失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('连接测试失败:', error)
    ElMessage.error(`${registry.name} 连接测试失败`)
  } finally {
    registry.testing = false
  }
}

// 测试所有连接
const testAllConnections = async () => {
  testing.value = true
  try {
    const promises = registries.value.map((registry: any) => testConnection(registry))
    await Promise.all(promises)
    ElMessage.success('所有连接测试完成')
  } catch (error) {
    console.error('批量测试连接失败:', error)
    ElMessage.error('批量测试连接失败')
  } finally {
    testing.value = false
  }
}

// 同步仓库
const syncRegistry = async (registry: any) => {
  registry.syncing = true
  try {
    const response = await dockerRegistryAPI.syncRegistry(registry.id)
    if (response.data.success) {
      ElMessage.success(`${registry.name} 同步成功`)
      await loadRegistries()
    } else {
      ElMessage.error(`${registry.name} 同步失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('同步仓库失败:', error)
    ElMessage.error(`${registry.name} 同步失败`)
  } finally {
    registry.syncing = false
  }
}

// 编辑仓库
const editRegistry = (registry: any) => {
  Object.assign(registryForm, registry)
  registryDialogTitle.value = '编辑镜像仓库'
  registryDialogVisible.value = true
}

// Harbor项目管理
const manageProjects = (registry: any) => {
  // 跳转到Harbor项目管理页面
  router.push({
    path: '/docker/harbor-projects',
    query: { registryId: registry.id }
  })
}

// 保存镜像仓库
const saveRegistry = async () => {
  if (!registryFormRef.value) return

  try {
    await registryFormRef.value.validate()
    saving.value = true

    const isEdit = !!registryForm.id
    const formData = { ...registryForm }

    // 根据认证方式清理不需要的字段
    if (formData.registry_type === 'harbor' && formData.auth_type === 'token') {
      formData.username = ''
      formData.password = ''
    } else {
      formData.robot_token = ''
    }

    let response
    if (isEdit) {
      response = await dockerRegistryAPI.updateRegistry(formData.id, formData)
    } else {
      response = await dockerRegistryAPI.createRegistry(formData)
    }

    if (response.data.success || response.status === 200 || response.status === 201) {
      ElMessage.success(isEdit ? '仓库更新成功' : '仓库创建成功')
      registryDialogVisible.value = false
      await loadRegistries()
      await loadStatistics()
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存镜像仓库失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// 删除仓库
const deleteRegistry = async (registry: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除仓库 "${registry.name}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const response = await dockerRegistryAPI.deleteRegistry(registry.id)
    if (response.data.success || response.status === 200 || response.status === 204) {
      ElMessage.success('仓库删除成功')
      await loadRegistries()
      await loadStatistics()
    } else {
      ElMessage.error(response.data.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除仓库失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 工具函数
const getRegistryTypeColor = (type: string) => {
  switch (type) {
    case 'dockerhub': return 'primary'
    case 'harbor': return 'success'
    case 'private': return 'info'
    case 'aliyun': return 'warning'
    case 'tencent': return 'danger'
    default: return 'info'
  }
}

const getRegistryTypeText = (type: string) => {
  switch (type) {
    case 'dockerhub': return 'Docker Hub'
    case 'harbor': return 'Harbor'
    case 'private': return '私有仓库'
    case 'aliyun': return '阿里云'
    case 'tencent': return '腾讯云'
    default: return '未知'
  }
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'connected': return 'success'
    case 'disconnected': return 'danger'
    case 'error': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'connected': return '已连接'
    case 'disconnected': return '连接失败'
    case 'error': return '错误'
    default: return '未知'
  }
}

const formatTime = (time: string) => {
  if (!time) return '从未'
  return new Date(time).toLocaleString('zh-CN')
}
</script>

<style scoped>
/* 使用与Zabbix服务器配置页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 50px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 130px 20px, #eee, transparent),
    radial-gradient(2px 2px at 160px 60px, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat;
  background-size: 200px 120px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 60px 90px, #fff, transparent),
    radial-gradient(1px 1px at 100px 40px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 140px 70px, #eee, transparent);
  background-repeat: repeat;
  background-size: 250px 150px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  margin: 0;
}

.audit-table-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #00eaff;
}

.time-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* 认证方式选择样式 */
.auth-type-group {
  display: flex;
  gap: 20px;
}

.glass-radio {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
    border-color: rgba(164, 244, 186, 0.4) !important;
  }

  i {
    margin-right: 8px;
    color: #00eaff;
  }
}

.form-tip {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;

  i {
    color: #00eaff;
  }
}

.form-warning {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;

  i {
    color: #f59e0b;
    margin-right: 8px;
  }

  strong {
    color: #f59e0b;
  }
}

/* 工具栏按钮样式 - 完全照抄Zabbix服务器配置页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }

  &.delete-button {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(239, 68, 68, 0.3) !important;
      border-color: rgba(239, 68, 68, 0.6) !important;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
    }

    i {
      color: #ef4444 !important;
    }
  }
}

/* 表格样式 */
:deep(.audit-table) {
  background: transparent !important;

  .el-table__header {
    background: rgba(164, 244, 186, 0.1) !important;
  }

  .el-table__header th {
    background: transparent !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
  }

  .el-table__body tr {
    background: transparent !important;

    &:hover {
      background: rgba(164, 244, 186, 0.05) !important;
    }
  }

  .el-table__body td {
    border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

/* 对话框样式 */
:deep(.glass-dialog) {
  .el-dialog {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
  }

  .el-dialog__header {
    background: rgba(164, 244, 186, 0.1) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .el-dialog__title {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
  }

  .el-dialog__body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-form-item__label {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 6px !important;
  }

  .el-input__inner {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-textarea__inner {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 6px !important;
  }
}

.action-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.action-buttons .glass-button {
  padding: 6px 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  width: auto !important;

  i {
    margin-right: 5px !important;
  }
}

/* 测试连接按钮 - 蓝绿色 */
.action-buttons .test-button {
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  color: #ffffff !important;

  &:hover {
    background: rgba(6, 182, 212, 0.3) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
  }

  i {
    color: #06b6d4 !important;
  }
}

/* 同步按钮 - 紫色 */
.action-buttons .sync-button {
  background: rgba(138, 43, 226, 0.2) !important;
  border-color: rgba(138, 43, 226, 0.4) !important;
  color: #ffffff !important;

  &:hover {
    background: rgba(138, 43, 226, 0.3) !important;
    border-color: rgba(138, 43, 226, 0.6) !important;
    box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
  }

  i {
    color: #8a2be2 !important;
  }
}

/* 项目管理按钮 - 绿色 */
.action-buttons .manage-button {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #ffffff !important;

  &:hover {
    background: rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
  }

  i {
    color: #22c55e !important;
  }
}

/* 编辑按钮 - 橙色 */
.action-buttons .edit-button {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #ffffff !important;

  &:hover {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) !important;
  }

  i {
    color: #f59e0b !important;
  }
}

/* 删除按钮 - 红色 */
.action-buttons .delete-button {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ffffff !important;

  &:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
  }

  i {
    color: #ef4444 !important;
  }
}
</style>
